<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-class的绑定</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        .container div {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin: 20px;
        }

        button {
            outline: none !important;
            margin: 20px;
        }

        div.base {
            font-size: 24px;
        }

        div.box {
            background-color: skyblue;
        }

        div.cls1 {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h3>class的绑定属性</h3>
            <hr>
            <button class="btn btn-primary" @click="flag = !flag">点击触发</button>

            <!-- 方式1: 使用data中的数据作为类名 -->
            <!-- <div v-bind:class="'base ' + cls">123</div> -->
            <!-- 方式2：使用绑定属性的新class解析data中的类 -->
            <!-- <div class="base" :class="flag ? cls : div">abc</div> -->

            <!-- 方式3: 以对象的方式声明，可以通过布尔值确定是否加载类名 -->
            <!-- <div class="base" :class="{ cls1: true }">尚硅谷</div> -->
            <!-- <div class="base" :class="{ cls1: flag, box: !flag }">尚硅谷</div> -->
            <!-- <div class="base" :class="obj">尚硅谷</div> -->

            <!-- 方式4：数组的方式展示 -->
            <!-- <div :class="[ 'base', 'box' ]">123</div> -->
            <div :class="arr">123</div>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#app',
            data: {
                // cls: 'cls1',
                // div: 'box',
                obj: {
                    cls1: true, 
                    box: false
                },
                flag: true,
                arr: ['base', 'cls1']
            }
        })
    </script>
</body>
</html>